<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>用 户：</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名:</label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="username" autocomplete="off" class="layui-input"
                                           placeholder="输入用户名">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i
                                    class="layui-icon"></i> 搜 索
                            </button>
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-add-btn"><i
                                    class="fa fa-plus"></i> 添 加
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container"></div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-danger layui-btn-xs data-count-edit"
               lay-event="stopCar">停用车位</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs data-count-edit"
               lay-event="stopRoom">停用房屋</a>
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="addRoom">房屋分配</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="addCar">车位分配</a>
            <a class="layui-btn layui-btn-warm layui-btn-xs data-count-edit" lay-event="addPayment">缴费管理</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs data-count-edit" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<!-- 添加表单弹窗 -->
<script type="text/html" id="modelAdd">
    <form id="modelAddForms" lay-filter="modelAddForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="请输入手机号" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择性别</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset" id="closeBtn">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitAdd" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<!-- 修改表单弹窗 -->
<script type="text/html" id="modelEdit">
    <form id="modelEditForms" lay-filter="modelEditForm" class="layui-form model-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="请输入手机号" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择性别</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<%--停用车位--%>
<script type="text/html" id="modelStopCarEdit">
    <form id="modelEditStopCarForms" lay-filter="modelEditStopCarForms" class="layui-form model-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">停用车位</label>
            <div class="layui-input-block">
                <select name="car" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择停用车位</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitStopCar" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<%--停用房屋--%>
<script type="text/html" id="modelStopRoomEdit">
    <form id="modelEditStopRoomForms" lay-filter="modelEditStopRoomForms" class="layui-form model-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">停用房屋</label>
            <div class="layui-input-block">
                <select name="room" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择停用的房屋</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitStopRoom" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<!-- 房屋分配 -->
<script type="text/html" id="modelAllotRoomEdit">
    <form id="modelAllotRoomEditForms" lay-filter="modelAllotRoomEditForms" class="layui-form model-form">
        <input type="hidden" name="id" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">单元</label>
            <div class="layui-input-block">
                <select name="danyuanId" lay-verType="tips" lay-verify="required" required lay-filter="parentCategory">
                    <option value="">请选择单元</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">空闲房间</label>
            <div class="layui-input-block">
                <select name="roomId" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择空闲房间</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitAllotRoom" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<%--分配车位--%>
<script type="text/html" id="modelAllotCarEdit">
    <form id="modelEditAllotCarForms" lay-filter="modelEditAllotCarForms" class="layui-form model-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="type" lay-verType="tips" lay-verify="required" required lay-filter="parentCategory">
                    <option value="">请选择类型</option>
                    <option value="0">地上</option>
                    <option value="1">地下</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">空闲车位</label>
            <div class="layui-input-block">
                <select name="carId" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择空闲车位</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitAllotCar" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<%--缴费管理--%>
<script type="text/html" id="modelCostMgeEdit">
    <form id="modelEditCostMgeForms" lay-filter="modelEditCostMgeForms" class="layui-form model-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">缴费类型</label>
            <div class="layui-input-block">
                <select name="type" lay-verType="tips" lay-verify="required" required lay-filter="parentCategory">
                    <option value="">请选择缴费类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">缴费金额</label>
            <div class="layui-input-block">
                <input name="money" placeholder="请输入缴费金额" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitCostMge" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        // 表格渲染
        table.render({
            elem: '#currentTableId',
            url: '/userMgeServlet?opt=cy6',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {title: '#', type: 'numbers'},
                {field: 'username', title: '用户名'},
                {field: 'phone', title: '手机号'},
                {
                    field: 'sex', title: '性别', templet: function (row) {
                        return `<input type="checkbox" lay-text="男|女" lay-skin="switch" \${row.sex==1?'checked':''} disabled>`
                    }
                },
                {field: 'cardName', title: '车位'},
                {field: 'roomName', title: '房屋'},
                {title: '操作', minWidth: 510, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [4, 6, 8, 10],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {  // data 表单数据对象 name键 value值
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    username: data.field.username
                }
            }, 'data');
            return false;
        });

        // 监听添加新用户
        form.on('submit(data-add-btn)', function (data) {  // data 表单数据对象 name键 value值
            // 打开添加对话框
            layer.confirm('是否注册新用户', {
                    btn: ['确定', '关闭'] //按钮
                }, function () {
                    layer.msg('前往注册页面', {icon: 1});
                    window.location.replace("/page/user/login.jsp");
                },
                //       function(){
                // layer.msg('第二个回调', {
                //   time: 20000, // 20s 后自动关闭
                //   btn: ['明白了', '知道了']}
            );
            // showAddModel();
            return false;
        });

        // 显示添加表单弹窗
        function showAddModel() {
            // 打开弹窗
            layer.open({
                type: 1,
                title: '添加用户',
                content: $('#modelAdd').html(),
                success: function (layero, dIndex) {
                    // 渲染表单控件
                    form.render();
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.on('submit(modelSubmitAdd)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/userMgeServlet?opt=cy6add',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }

        // 监听修改删除
        table.on('tool(currentTableFilter)', function (obj) {
            let data = obj.data;
            if (obj.event === 'edit') {
                showEditModel(data);
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm(`确定要删除用户\${data.username}吗?`, function (index) {
                    $.getJSON('/userMgeServlet?opt=cy6delete', `id=\${data.id}`, function (data) {
                        if (data.code == 0) {
                            layer.close(index);
                            layer.msg(data.msg, {icon: 1});
                            // 刷新数据
                            table.reload('currentTableId')
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    })

                });
            } else if (obj.event === 'stopCar') { // 停用车位
                // 打开弹窗
                if (data.cardName != "暂无") {
                    shoeStopCar(data);
                } else {
                    layer.msg('该用户暂无车位', {icon: 2})
                }
                ;
                return false;
            } else if (obj.event === 'stopRoom') { // 停用房屋
                if (data.roomName != "暂无") {
                    shoeStopRoom(data);
                } else {
                    layer.msg('该用户暂无房屋', {icon: 2})
                }
                ;
                return false;
            } else if (obj.event === 'addRoom') { // 房屋分配
                allotRoom(data);
                return false;
            } else if (obj.event === 'addCar') { // 车位分配
                allotCar(data);
                return false;
            } else if (obj.event === 'addPayment') { // 缴费管理
                costMge(data);
                return false;
            }
        });

        // 显示修改表单弹窗
        function showEditModel(data) {
            // 打开弹窗
            layer.open({
                type: 1,
                title: '修改用户',
                content: $('#modelEdit').html(),
                success: function (layero, dIndex) {
                    // 绑定数据 | ajax request
                    $('#modelEditForms [name=id]').val(data.id)
                    $('#modelEditForms [name=username]').val(data.username)
                    $('#modelEditForms [name=phone]').val(data.phone)
                    $('#modelEditForms [name=sex]').val(data.sex)
                    // 渲染表单控件
                    form.render();
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.render();
                    form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/UserServlet?opt=cy6edit',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }

        //显示停用车位单弹窗
        function shoeStopCar(data) {
            layer.open({
                type: 1,
                title: '停用车位',
                content: $('#modelStopCarEdit').html(),
                success: function (layero, dIndex) {
                    // 加载用户车位  data.cardName.indexOf(',') != -1
                    $('#modelEditStopCarForms [name=id]').val(data.id)
                    $('#modelEditStopCarForms [name=car]').val()
                    let cname = data.cardName.split(',')
                    for (let i = 0; i < cname.length; i++) {
                        let option = `<option>\${cname[i]}</option>`
                        $('#modelEditStopCarForms [name=car]').append(option)
                    }
                    // 渲染表单控件
                    form.render();
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.render();
                    form.on('submit(modelSubmitStopCar)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                                url: '/userMgeServlet?opt=cy6stopCar',
                                type: "POST",
                                data: data.field,
                                dataType: "json",
                                success: function (data) {
                                    layer.closeAll('loading');
                                    if (data.code == 0) {
                                        layer.close(dIndex);
                                        layer.msg(data.msg, {icon: 1});
                                        // 刷新表格
                                        //执行搜索重载
                                        table.reload('currentTableId')
                                    } else {
                                        layer.msg(data.msg, {icon: 2});
                                    }
                                }
                            }
                        )
                        return false;
                    });

                }
            });
        }

        //显示停用房屋单弹窗
        function shoeStopRoom(data) {
            layer.open({
                type: 1,
                title: '停用房屋',
                content: $('#modelStopRoomEdit').html(),
                success: function (layero, dIndex) {
                    $('#modelEditStopRoomForms [name=id]').val(data.id)
                    $('#modelEditStopRoomForms [name=room]').val()
                    let rname = data.roomName.split(',')
                    for (let i = 0; i < rname.length; i++) {
                        let option = `<option>\${rname[i]}</option>`
                        $('#modelEditStopRoomForms [name=room]').append(option)
                    }
                    // 渲染表单控件
                    form.render();
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.on('submit(modelSubmitStopRoom)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                                url: '/userMgeServlet?opt=cy6stopRoom',
                                type: "POST",
                                data: data.field,
                                dataType: "json",
                                success: function (data) {
                                    layer.closeAll('loading');
                                    if (data.code == 0) {
                                        layer.close(dIndex);
                                        layer.msg(data.msg, {icon: 1});
                                        // 刷新表格
                                        //执行搜索重载
                                        table.reload('currentTableId')
                                    } else {
                                        layer.msg(data.msg, {icon: 2});
                                    }
                                }
                            }
                        )
                        return false;
                    });

                }
            });
        }

        //显示分配房屋单弹窗
        function allotRoom(data) {
            layer.open({
                type: 1,
                title: '房屋分配',
                content: $('#modelAllotRoomEdit').html(),
                success: function (layero, dIndex) {
                    // 赋值用户ID
                    $("#modelAllotRoomEditForms [name='id']").val(data.id);
                    // 加载空闲单元
                    $.ajax({
                        url: '/userMgeServlet?opt=cy6danyuan',
                        dataType: 'json',
                        type: 'get',
                        async: false,
                        success: function (res) {
                            if (res.code == 0) {
                                for (var i in res.data) {
                                    let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                    $("#modelAllotRoomEditForms [name='danyuanId']").append(option);
                                }
                            }
                            form.render()
                        }
                    })
                    // 选择单元后动态加载房屋信息
                    form.on('select(parentCategory)', function (res) {
                        $.ajax({
                            url: '/userMgeServlet?opt=cy6danyuanRoom&did=' + res.value,
                            dataType: 'json',
                            type: 'get',
                            async: false,
                            success: function (res) {
                                if (res.code == 0) {
                                    for (var i in res.data) {
                                        let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                        $("#modelAllotRoomEditForms [name='roomId']").append(option);
                                    }
                                }
                                form.render()
                            }
                        })
                    });
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.on('submit(modelSubmitAllotRoom)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/userMgeServlet?opt=cy6allotRoom',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }

        //显示分配车位单弹窗
        function allotCar(data) {
            layer.open({
                type: 1,
                title: '车位分配',
                content: $('#modelAllotCarEdit').html(),
                success: function (layero, dIndex) {
                    form.render()
                    // 赋值用户ID
                    $("#modelEditAllotCarForms [name='id']").val(data.id);
                    // 选择地上、地下后动态加载车位信息
                    form.on('select(parentCategory)', function (res) {
                        $.ajax({
                            url: '/userMgeServlet?opt=cy6type&type=' + res.value,
                            dataType: 'json',
                            type: 'get',
                            async: false,
                            success: function (res) {
                                if (res.code == 0) {
                                    for (var i in res.data) {
                                        let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                        $("#modelEditAllotCarForms [name='carId']").append(option);
                                    }
                                }
                                form.render()
                            }
                        })
                    });
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.on('submit(modelSubmitAllotCar)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/userMgeServlet?opt=cy6allotCar',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }

        //显示缴费管理弹窗
        function costMge(data) {
            layer.open({
                type: 1,
                title: '房屋分配',
                content: $('#modelCostMgeEdit').html(),
                success: function (layero, dIndex) {
                    // 赋值用户ID
                    $("#modelEditCostMgeForms [name='id']").val(data.id);
                    // 加载空闲单元
                    $.ajax({
                        url: '/userMgeServlet?opt=cy6payment',
                        dataType: 'json',
                        type: 'get',
                        async: false,
                        success: function (res) {
                            if (res.code == 0) {
                                for (var i in res.data) {
                                    let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                    $("#modelEditCostMgeForms [name='type']").append(option);
                                }
                            }
                            form.render()
                        }
                    })
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.on('submit(modelSubmitCostMge)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/userMgeServlet?opt=cy6costMge',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }
    });
</script>

</body>
</html>